<template>
	<view>
		<u-popup :show="getters.popupLoginShow" mode="center"
			:round="5" :closeOnClickOverlay="false">
			<view class="popup-warp">
				<view class="popup-title">会员登录</view>
				<view class="popup-logo">
					<image src="../../static/images/logo-color.png" mode=""/>
				</view>
				<view class="popup-auth-title">
					该程序将获取以下授权：
					<view class="auth-item">获得您的公开信息（昵称、头像等）</view>
				</view>
				<view class="popup-list">
					<view class="popup-btn">
						<u-button type="primary" :color="themeColor" shape="circle" text="手机号快捷登录/注册"
							open-type="getPhoneNumber" @getphonenumber="onMobileLogin"/>
					</view>
					<view class="popup-btn">		
						<u-button type="primary" :plain="true" :color="themeColor" shape="circle" text="暂不登录"
							@click="closePopup"/>
					</view>
					<view class="protocol-box">
						<u-checkbox-group v-model="isAgree" placement="column">
						    <u-checkbox :activeColor="themeColor" :name="1"/>
						</u-checkbox-group>
						<text class="protocol_text" @click="isAgree=!isAgree">我已阅读并同意<text @tap="viewServiceXieYi" class="font_pro">《用户服务协议》</text>和<text @tap="viewYinSiXieYi" class="font_pro">《隐私协议》</text></text>		
					</view>
					<view class="protocol-bottom">
						<text class="protocol_text">使用 <text class="font_pro">手机验证码登录</text></text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { loginApi } from '@/api/login'
	export default {
		name: "index",
		props: {

		},
		computed: {
			getters(){
				return this.$store.getters
			},
			themeColor() { //#9036FF
				return '#00518a';
			}
		},
		data() {
			return {
				isAgree: 1, //同意协议
			}
		},
		mounted() {

		},
		methods: {
			//查看 用户服务协议
			viewServiceXieYi(){
				this.$util.Tips({title: '查看 用户服务协议'})
			},
			//查看 隐私协议
			viewYinSiXieYi(){
				this.$util.Tips({title: '查看 隐私协议'})
			},
			//关闭Popup登录
			closePopup() {
				this.$store.commit('setLoginShow', false)
			},
			//微信手机号码一键登录
			async onMobileLogin(e){
				let that = this, res = e.detail
				uni.showLoading({ title: '加载中' })
				setTimeout(function() {
					uni.hideLoading()
				}, 2000)
				if (!res.encryptedData) {
					return uni.showToast({
						title: '登录失败，请重新授权', icon: 'none'
					})
				}
				let params = {
					encryptedData: (res.encryptedData),
					iv: (res.iv),
					code: res.code
				}
				let result = await loginApi(params)
				if(Number(result.code) == 0){
					that.$store.commit('setUserInfo', result.data)
					that.closePopup() //关闭Popup登录
					return uni.showToast({
						title: '登录成功', icon: 'none'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
//#9036FF
$theme-color: #00518a;
.popup-warp{
	font-size: .9rem;
	width: 650rpx;
	.popup-title{
		text-align: center;
		font-size: 1.2rem;
		line-height: 90rpx;
		font-weight: bold;
		padding-top: 30rpx;
		color: $theme-color;
	}
	.popup-logo{
		text-align: center; margin: 20rpx auto;
		image{
			width: 350rpx; height: 120rpx;
		}
	}
	.popup-auth-title{
		padding:20rpx 30rpx 20rpx 30rpx;
		.auth-item{
			font-weight: normal;
			color: #8e8e8f;
			font-size: .8rem;
			padding-left: 20rpx;
			margin-top:5rpx;
		}
		.auth-item:before{
			content: '·';
			margin-right: 10rpx;
		}
	}
	.popup-list{
		padding:15rpx 30rpx 0rpx 30rpx;
		.popup-btn{
			margin-bottom: 15rpx;
		}
		.font_pro{
			color: $theme-color;
		}
		.protocol_text{ }
		.protocol-box{
			display: flex;
			margin-top:30rpx;
		}
		.protocol-bottom{
			margin:15rpx 0 0 45rpx;
		}
	}
}
</style>